@page
@model B.WMS.Web.Pages.ImageTestModel
@{
    ViewData["Title"] = "图片显示测试";
}

<div class="container mt-4">
    <h2>OSS图片显示测试</h2>
    
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>上传图片测试</h5>
                </div>
                <div class="card-body">
                    <form id="imageUploadForm" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="imageFile" class="form-label">选择图片文件</label>
                            <input type="file" class="form-control" id="imageFile" name="file" accept="image/*" required>
                        </div>
                        <button type="submit" class="btn btn-primary">上传图片</button>
                    </form>
                    <div id="imageUploadResult" class="mt-3"></div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5>图片预览</h5>
                </div>
                <div class="card-body">
                    <div id="imagePreview" class="text-center">
                        <p class="text-muted">上传图片后将在这里显示预览</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5>图片信息</h5>
                </div>
                <div class="card-body">
                    <div id="imageInfo">
                        <p class="text-muted">图片信息将在这里显示</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        $(document).ready(function() {
            $('#imageUploadForm').on('submit', function(e) {
                e.preventDefault();
                
                var formData = new FormData();
                var fileInput = $('#imageFile')[0];
                formData.append('file', fileInput.files[0]);
                
                $.ajax({
                    url: '/api/oss/upload',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            // 显示上传结果
                            $('#imageUploadResult').html(`
                                <div class="alert alert-success">
                                    <strong>上传成功！</strong><br>
                                    <a href="${response.url}" target="_blank">${response.url}</a>
                                </div>
                            `);
                            
                            // 显示图片预览
                            $('#imagePreview').html(`
                                <img src="${response.url}" class="img-fluid" style="max-width: 100%; max-height: 400px;" alt="上传的图片">
                            `);
                            
                            // 显示图片信息
                            $('#imageInfo').html(`
                                <div class="row">
                                    <div class="col-md-6">
                                        <strong>文件名:</strong> ${fileInput.files[0].name}<br>
                                        <strong>文件大小:</strong> ${(fileInput.files[0].size / 1024).toFixed(2)} KB<br>
                                        <strong>文件类型:</strong> ${fileInput.files[0].type}
                                    </div>
                                    <div class="col-md-6">
                                        <strong>OSS URL:</strong> <a href="${response.url}" target="_blank">${response.url}</a><br>
                                        <strong>上传时间:</strong> ${new Date().toLocaleString()}<br>
                                        <strong>状态:</strong> <span class="badge bg-success">成功</span>
                                    </div>
                                </div>
                            `);
                        } else {
                            $('#imageUploadResult').html(`
                                <div class="alert alert-danger">
                                    <strong>上传失败！</strong><br>
                                    ${response.message}
                                </div>
                            `);
                        }
                    },
                    error: function(xhr) {
                        $('#imageUploadResult').html(`
                            <div class="alert alert-danger">
                                <strong>上传失败！</strong><br>
                                ${xhr.responseText}
                            </div>
                        `);
                    }
                });
            });
        });
    </script>
} 